/* colors
-------------------------- */

$color-brand: #f1836f;
$color-brand-light: #f39b8b;
$color-brand-dark: #f5735b;
$color-info: #f39b8b;
$color-dan: #fbd8d1;
$color-ex: #bc86bc;
$color-border-base: #eee;
//
$color-primary: #f1836f !default;
$color-deep: #f5735b !default;
$border: #f1f1f1 !default;
$font-primary: #333 !default;
$font-default: #666 !default;
$font-active: #111 !default;
$font-info: #aaa !default;
/* button-colors
-------------------------- */

$btn-active: #f5735b !default;
$btn-disabled: #ccc !default;
$btn-disabled-else: mix(#fff, $btn-active, 70%) !default;
/* background-colors
-------------------------- */

$bg-color-base: #f8f8f8 !default;
$bg-color-light: #ddd !default; //页面浅灰背景&图片浅灰背景
$bg-color-danger: #f9efef !default; //页面浅红背景&按钮边框
$bg-color-panel: #ec5d75 !default;
/* tag-colors
-------------------------- */

$tag-primary: #d87182 !default;
$tag-dark: #555 !default;
/* methods
-------------------------- */

// 超出点点点
@mixin ddd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 背景图片地址和大小
@mixin bg($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

// 定位上下左右居中
@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 定位上下居中
@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// 定位左右居中
@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// 宽高
@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

// 字体大小，颜色
@mixin sc($size, $color) {
  font-size: $size;
  color: $color;
}

// flex 布局和 子元素 对其方式 flex-start | flex-end | center | space-between | space-around;
@mixin fj($type: space-between) {
  display: flex;
  justify-content: $type;
}
